<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/js/jquery.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css">
<body>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
            <tr>
              <th class='text-center'></th>
              <th class='text-center'>班级名称</th>
              <th class='text-center'>专业方向</th>
              <th class='text-center'>人数</th>
              <th class='text-center'>操作</th>
            </tr>
          </thead>
          <tbody id="classBody">
          </tbody>
        </table>
        <button class="btn btn-success" id="addClass">添加</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="saveClass">保存</button>
      </div>
    </div>
  </div>
</div>
<script>
    $('#staticBackdrop').modal('show')

    function addDel(){
      $('.classDel').on('click',function(){
        this_tr =$(this).parent().parent().parent()
        this_formGroup = $(this_tr).children().children()[0]
        this_index = $(this_formGroup).children()[0].value
        $(this_tr).remove()
        // console.log(this_tr)
      })
    }
    

    var classList
    axios.get('/api/admin/class2').then(
      function(res){
        classList = res.data
        for(let i =0;i<classList.length;i++){
           $('#classBody').append( `
            <tr>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control classID" value="${classList[i].id}" readonly hidden aria-describedby="emailHelp">
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control className" value="${classList[i].name}" aria-describedby="emailHelp">
                </div>
              </td>
              <td>
                <div class="form-group">
                  <select type="email" class="form-control classDirection" aria-describedby="emailHelp">
                    <option value='vr' ${classList[i].subject=='vr'?'selected':''}>vr</option>
                    <option value='php' ${classList[i].subject=='php'?'selected':''}>php</option>
                    <option value='java' ${classList[i].subject=='java'?'selected':''}>java</option>
                    <option value='ui' ${classList[i].subject=='ui'?'selected':''}>ui</option>
                    <option value='网络' ${classList[i].subject=='网络'?'selected':''}>网络</option>
                    <option value='游戏' ${classList[i].subject=='游戏'?'selected':''}>游戏</option>
                  </select>
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control classPeopleNum" value="${classList[i].maxcapacity}" aria-describedby="emailHelp">
                </div>
              </td>
              <td width = '100'>
                <div class="form-group">
                  <button class="btn btn-dark classDel">删除</button>
                </div>
              </td>
              </td>
            </tr>
          `)
          addDel()
        }
      }
    )

  

   

    $('#addClass').on('click',function(){
    $('#classBody').append( `
      <tr>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control classID"  readonly hidden aria-describedby="emailHelp">
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control className" aria-describedby="emailHelp">
                </div>
              </td>
              <td>
              <div class="form-group">
                  <select type="email" class="form-control classDirection" aria-describedby="emailHelp">
                    <option value='vr'>vr</option>
                    <option value='php'>php</option>
                    <option value='java'>java</option>
                    <option value='ui'>ui</option>
                    <option value='网络'>网络</option>
                    <option value='游戏'>游戏</option>
                  </select>
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input type="email" class="form-control classPeopleNum" aria-describedby="emailHelp">
                </div>
              </td>
              <td width = '100'>
                <div class="form-group">
                  <button class="btn btn-dark classDel">删除</button>
                </div>
              </td>
              </td>
            </tr>
      `)

      addDel()
    
    })

    $('#saveClass').on('click',function(){
      class_tr = $('#classBody').children()
      classField = ['id','name','subject','maxcapacity']
      list = classList
      newClassList=[]
      addClass = []
      delClass =[]
      updataClass =[]
      for(let i =0 ;i < class_tr.length;i++){
        class_td = $(class_tr[i]).children()
        classItem = {}
        for(let j = 0;j < classField.length;j++){
          value = $(class_td[j]).children().children()[0].value
          classItem[classField[j]] = parseInt(value)?parseInt(value):value
        }
        if(classItem.id == ''){
          addClass.push(classItem)
        }else if(classItem.id !== ''){
          newClassList.push(classItem)
        }
      }

      // 寻找被删除的班级记录
      if(newClassList.length !== list.length){
        newId =[]
        oldId =[]
        

        for(value of newClassList){
          newId.push(value.id)
        }

        for(value of list){
          oldId.push(value.id)
        }

        if(newId.length == 0 ){
          delClass = oldId
        }else{
          for(item of newId){
            if (oldId.indexOf(item) != -1){
              oldId.splice(oldId.indexOf(item),1)
            }
          }
          delClass = oldId
        }

        // 将已被删除的id剔除出list
        list.filter(function(value,index){
          for(let i = 0 ;i <delClass.length ;i++){
            if(value.id == delClass[i]){
              list.splice(index,1)
            }
          }
        })

      }

      //将剩下的记录和数据对比 找出更新的数据
      for(item of newClassList){
        for(let i = 0;i < classList.length ;i++){
          if(item.id == classList[i].id){
            if(item.name !== classList[i].name || item.subject !== classList[i].subject ||item.maxcapacity !== classList[i].maxcapacity ){
              updataClass.push(item)
            }
          }
        }
      }

      if(addClass.length != 0 ){
        // http = 
        for(item of addClass){
          axios.post('/api/admin/class2',{operating:1,class:{name:item.name,subject:item.subject,maxcapacity:item.maxcapacity}})
          .then(function(res){
            if(res.data.message){
            }
          })
        }
      }

      if(delClass.length != 0 ){
        for(item of delClass){
          axios.post('/api/admin/class2',{operating:-1,id:item})
          .then(function(res){
            console.log(res.data)
            if(res.data.message){
            }
          })
        }
      }
      
      if(updataClass.length != 0){
        for(item of updataClass){
          axios.post('/api/admin/class2',{operating:1,class:{name:item.name,subject:item.subject,maxcapacity:item.maxcapacity}})
          .then(function(res){
            console.log(res.data)
            if(res.data.message){
            }
          })
        }
      }
      

    $('#staticBackdrop').modal('hide')

    })
</script>
</body>
</html>